<template>
  <div id="app">
    <my-head v-if='show'></my-head>
    <side-bar v-if='show'></side-bar>
    <router-view></router-view>
    <my-foot v-if='show'></my-foot>
  </div>
</template>

<script>
import myHead from './components/Header'
import myFoot from './components/Foot'
import sideBar from './components/Sidebar'

export default {
  name: 'app',
  components: {
    myHead, 
    myFoot,
    sideBar
  },
  data() {
    return {
      show:true,
    }
  },
  computed: {
    show() {
      if(this.$route.path ==='/'){
        return this.show = false;
      }else {
        return this.show = true;
      }
    }
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  color: #2c3e50;
  text-align: center;
  position: relative;
  overflow: hidden;
  min-height: 100%;
}
</style>
